<script setup>
import { mainStore } from '../../store/mainStore.js'
import { useRouter } from 'vue-router'
import { btnList } from './js/pageData.js'
import { ref } from 'vue'

const route = useRouter()
const store = mainStore()

let currentChildren = ref('')
const toPage = (e, params) => {
  e.stopPropagation()

  // 有子路由的不让跳转一级路由
  if (params.children) return
  route.push('/' + params.path)

  currentChildren.value = params.path
}
</script>

<template>
  <div class="nav-container">
    <!-- logo -->
    <div class="logo">
      <p>亦庄 V-4.0</p>
    </div>

    <!-- 按钮 list -->
    <div class="btns">
      <div v-for="item in btnList" :key="item.id" @click="toPage($event, item)" :class="[item.children ? 'show' : '']">
        <!-- 显示图标和标题 -->
        <div :class="[store.currentRoute == item.path ? 'titleSelect' : '', 'imgTitle']">
          <img :src="item.imgUrl" />
          <p>{{ item.title }}</p>

          <!-- 显示子项 -->
          <div class="showChildren">
            <div v-for="iten in item.children" :key="iten" :class="currentChildren == iten.path ? 'titleSelect' : ''" @click="toPage($event, iten)">
              <p>{{ iten.title }}</p>
            </div>
          </div>
          <!-- 显示子项结束 -->
        </div>

        <!-- 显示下划线 -->
        <div class="line" v-if="store.currentRoute == item.path"></div>
      </div>
    </div>

    <!-- 用户 -->
    <div class="auth">
      <img src="/public/nav/ava.png" />
      <p>wanji</p>
    </div>
  </div>
</template>

<style lang="less" scoped>
.nav-container {
  height: 54px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(64, 149, 229);
  flex-shrink: 0;
}

.logo {
  font-size: 26px;
  color: white;
  height: 100%;
  line-height: 50px;
  font-weight: 700;
  padding: 0 10px;
  min-width: 300px;

  > p {
    white-space: normal;
    word-wrap: break-word;
  }
}

@media (max-width: 1599px) {
  .logo {
    font-size: 16px !important;
  }
}

.btns {
  flex: 1;
  background-color: aqua;
  width: auto;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  padding: 0 20px;
  margin-right: 40px;

  .show:hover {
    .showChildren {
      display: block;
    }
  }

  > div {
    width: 186px;
    height: 60px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;

    .imgTitle {
      width: 100%;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      > img {
        width: 12px;
        height: 12px;
        margin-top: 2px;
      }
      > p {
        height: 100%;
        line-height: 36px;
        margin-left: 4px;
      }

      .showChildren {
        position: absolute;
        left: 0;
        top: 50px;
        z-index: 99;
        display: none;
        background-color: rgba(240, 240, 240, 1);
        color: black;
        padding: 0 10px;
        box-shadow: 0 0 2px black; /* 阴影效果 */

        > div {
          height: 30px;
          display: flex;
          align-items: center;
          margin-bottom: 2px;
          font-size: 14px;
          padding: 0 10px 0 10px;
          transition: background-color 0.3s ease; /* 设置颜色过渡 */
          > p {
            white-space: nowrap;
          }
        }
      }

      .showChildren > div:hover {
        background-color: rgba(64, 149, 229, 0.4);
      }
    }

    .line {
      position: absolute;
      bottom: 12px;
      width: 100%;
      height: 2px;
      background-color: rgb(22, 132, 252);
      pointer-events: none;
    }
  }
}

.auth {
  width: 80px;
  height: 100%;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    height: 40px;
    width: 40px;
  }
  p {
    color: white;
    margin-left: 10px;
  }
}

.titleSelect {
  background-color: rgba(64, 149, 229, 0.2) !important;
}
</style>
